@extends('admin.layout')

@section('content')
    <div class='row'>

        <div class='col-md-6'>
            <!-- Box -->
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Randomly Generated Tasks</h3>
                    <div class="box-tools pull-right">
                        <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
                        <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
                    </div>
                </div>
                <div class="box-body">
                    @foreach($tasks as $task)
                        <h5>
                            {{ $task['name'] }}
                            <small class="label label-{{$task['color']}} pull-right">{{$task['progress']}}%</small>
                        </h5>
                        <div class="progress progress-xxs">
                            <div class="progress-bar progress-bar-{{$task['color']}}" style="width: {{$task['progress']}}%"></div>
                        </div>
                    @endforeach

                </div><!-- /.box-body -->
                <div class="box-footer">
                    <form action='#'>
                        <input type='text' placeholder='New task' class='form-control input-sm' />
                    </form>
                </div><!-- /.box-footer-->
            </div><!-- /.box -->
        </div><!-- /.col -->
        <div class='col-md-6'>
            <!-- Box -->
            <div class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">Second Box</h3>
                    <div class="box-tools pull-right">
                        <button class="btn btn-box-tool" data-widget="collapse" data-toggle="tooltip" title="Collapse"><i class="fa fa-minus"></i></button>
                        <button class="btn btn-box-tool" data-widget="remove" data-toggle="tooltip" title="Remove"><i class="fa fa-times"></i></button>
                    </div>
                </div>
                <div class="box-body">
                    A separate section to add any kind of widget. Feel free
                    to explore all of AdminLTE widgets by visiting the demo page
                    on <a href="https://almsaeedstudio.com">Almsaeed Studio</a>.
                </div><!-- /.box-body -->
            </div><!-- /.box -->
        </div><!-- /.col -->

        <table class="table table-bordered" id="dataTableBuilder">
            <thead>
                <tr>
                    <th>Id</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Created At</th>
                    <th>Updated At</th>
                    <th width="80px">Action</th>
                </tr>
            </thead>
        </table>

    </div><!-- /.row -->
@endsection

@section('scripts')

<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.0.3/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.0.3/js/dataTables.buttons.min.js"></script>
<script src="{{ asset("/vendor/datatables/buttons.server-side.js") }}"></script>
<script type="text/javascript">
window.LaravelDataTables = window.LaravelDataTables || {};
window.LaravelDataTables["dataTableBuilder"] = $("#dataTableBuilder").DataTable({
    "serverSide": true,
    "processing": true,
    "ajax": "",
    "columns": [{
        "name": "id",
        "data": "id",
        "title": "Id",
        "orderable": true,
        "searchable": true
    },
    {
        "name": "name",
        "data": "name",
        "title": "Name",
        "orderable": true,
        "searchable": true
    },
    {
        "name": "email",
        "data": "email",
        "title": "Email",
        "orderable": true,
        "searchable": true
    },
    {
        "name": "created_at",
        "data": "created_at",
        "title": "Created At",
        "orderable": true,
        "searchable": true
    },
    {
        "name": "updated_at",
        "data": "updated_at",
        "title": "Updated At",
        "orderable": true,
        "searchable": true
    },
    {
        "defaultContent": "",
        "data": "action",
        "name": "action",
        "title": "Action",
        "render": null,
        "orderable": false,
        "searchable": false,
        "width": "80px"
    }],
    "dom": "Bfrtip",
    "buttons": ["csv", "excel", "pdf", "print", "reset", "reload"]
});
</script>
@endsection